import pao = require('../pao/public');
import paoClient = require('../pao/client/client');
import paoControls = require('../pao/client/controls');
import report = require('../pao/client/report');

let moduleName = "pao.test";

/**
 * 测试视图
 */
@pao.addon("测试视图", "测试视图", moduleName)
@paoClient.template('<div></div>')
export class testView extends paoClient.baseView {
    onAfterBind?() {
        syncRequire('./pao/client/controls');

        let fields :  paoClient.baseControl[] = [
            {
                $type: "pao.client.fieldControl",
                frontLabel: "单价",
                backLabel: "元",
                input: {
                    $type:"pao.client.input",
                    type: "text",
                    placeHolder: "此处输入单价",
                }
            },
            {
                $type: "pao.client.fieldControl",
                frontLabel: "名称",
                input: {
                    $type:"pao.client.input",
                    type: "text",
                    placeHolder: "此处输入用户名",
                }
            },
            {
                $type: "pao.client.fieldControl",
                frontLabel: "密码",
                input: {
                    $type:"pao.client.input",
                    type: "password",
                    placeHolder: "此处输入密码",
                }
            },
            {
                $type: "pao.client.fieldControl",
                frontLabel: "文件",
                input: {
                    $type:"pao.client.input",
                    type: "file",
                    placeHolder: "此处输入文件",
                }
            }
        ];
        pao.fetchAddonProtoType(fields);
        let clientPanel = new paoControls.layoutPanel('config/layout.html');

        let paramPanel = new paoControls.layoutPanel();
        let i = 0;
        for(let field of fields) {
            paramPanel.addChild(`field${i}`, field);
            i++;
        }
        clientPanel.addChild("parameters", paramPanel);

        let echart = new report.echartDataDisplayer();
        echart.style({
            "height": "200px",
            "width": "200px"
        });
        echart.options = {
            tooltip: {
                show: true
            },
            legend: {
                data:['销量']
            },
            xAxis : [
                {
                    type : 'category',
                    data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
                }
            ],
            yAxis : [
                {
                    type : 'value'
                }
            ],
            series : [
                {
                    "name":"销量",
                    "type":"bar",
                    "data":[50, 20, 40, 10, 10, 32]
                }
            ]
        };
        clientPanel.addChild("echart", echart);

        clientPanel.appendTo(this.element);
    }
}